<template>
	<div class="dealProductInput">

		<ul class="mui-table-view">
			<div class="search">
				<div class="mui-input-row">
					<label>扫码区域：</label>
					<div class="search-right">
						<input type="text" placeholder="请输入工单编号" class="search-input" />
						<el-button type="primary">确定</el-button>
					</div>
				</div>
			</div>
			<li class="mui-table-view-cell">
				<span class="leftSpan">工单编号：</span>
				<span>WN20170923008</span>
			</li>
			<li class="mui-table-view-cell">
				<span class="leftSpan">订单编号：</span>
				<span>WN20170923008</span>
			</li>
			<li class="mui-table-view-cell">
				<span class="leftSpan">状<span style="margin-right: 32px;"></span>态：</span>
				<span>未开始</span>
			</li>
			<li class="mui-table-view-cell">
				<span class="leftSpan">产<span style="margin-right: 32px;"></span>品：</span>
				<span>PCB刀具20</span>
			</li>
			<li class="mui-table-view-cell">
				<span class="leftSpan">数<span style="margin-right: 32px;"></span>量：</span>
				<span>82</span>
			</li>
			<li class="mui-table-view-cell" @click="goOptionsInput">
				<a class="mui-navigate-right">投料信息<span class='options'>选择投料</span></a>
			</li>
		</ul>
		<mt-navbar v-model="selected">
			<mt-tab-item id="1"><span class="icon el-icon-postcard"></span>需求物料</mt-tab-item>
			<mt-tab-item id="2">
				<span class="iconfont icon-touliao"></span>
				生产投料
			</mt-tab-item>
		</mt-navbar>
		<mt-tab-container v-model="selected">
			<mt-tab-container-item id="1">
				
			</mt-tab-container-item>
			<mt-tab-container-item id="2">
				<div class="mui-card">
					<div class="mui-card-content">
						<div class="mui-card-content-inner">
							<p>
								<span>产品编号</span>
								<span>cll71130</span>
							</p>
							<p>
								<span>产品名称</span>
								<span>材料171130</span>
							</p>
							<p>
								<span>批次编号</span>
								<span>BA20171202001013</span>
							</p>
							<p>
								<span>投料数量</span>
								<span>1</span>
							</p>
						</div>
					</div>
				</div>
				<div class="mui-card">
					<div class="mui-card-content">
						<div class="mui-card-content-inner">
							<p>
								<span>产品编号</span>
								<span>cll71130</span>
							</p>
							<p>
								<span>产品名称</span>
								<span>材料171130</span>
							</p>
							<p>
								<span>批次编号</span>
								<span>BA20171202001013</span>
							</p>
							<p>
								<span>投料数量</span>
								<span>1</span>
							</p>
						</div>
					</div>
				</div>
			</mt-tab-container-item>
		</mt-tab-container>
		<mt-button type="primary" size='large' >提交</mt-button>
		<mt-button type="default" size='large' @click='goBack()'>返回</mt-button>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				selected:'1'
			}
		},
		methods:{
			goOptionsInput(){
				this.$router.push({name:'optionsInput'})
			}
		}
	}
</script>

<style scoped="scoped">
	.mint-navbar{
		margin-top: 5px;
		background: #f4f4f5;
	}
	.mui-card{
		box-shadow:0px 6px 8px #cdcdcd;
	}
	.mui-card p{
		display: flex;
		justify-content: space-between;
		font-size: 15px;
	}
	.mint-button--large {
		width: 92%;
		margin: 0 auto;
		margin-top: 16px;
	}
	
	.mint-button--default {
		background: white;
	}
	.options{
		float: right;
		margin-right: 18px;
		color: #999;
		font-size: 14px;
	}
	.leftSpan {
		margin-right: 33px;
	}

	.search-input {
		padding-left: 0;
		border: none;
		margin-bottom: 0;
		font-size: 16px;
	}

	.search {
		padding-top: 10px;
		margin-top: 60px;
		margin-bottom: 20px;
		margin-left: 15px;
		border-bottom: 1px solid #DDDDDD;
	}

	.mui-input-row {
		background: white;
	}

	.mui-input-row label {
		padding-right: 4px;
		font-size: 16px;
		width: 34%;
		padding-left: 0;
		letter-spacing: 0.11em;
	}

	.mui-input-row label~input,
	.mui-input-row label~select,
	.mui-input-row label~textarea {
		width: 66%;
	}

	.el-button {
		padding: 8px 16px;
		margin-bottom: 0px;
		height: 30px;
		margin-top: 5px;
		margin-right: 10px;
	}

	.search-right {
		display: flex;
		justify-content: space-between;
	}

	.search-radio {
		margin-top: -7px;
	}
	.icon {
		margin-right: 7px;
	}
	
	.mint-navbar .mint-tab-item.is-selected {
		border-bottom: 2px solid #26a2ff;
	}
	
	
	.mint-tab-container {
		margin-top: 30px;
	}
</style>
